let icon1 = 'image://'
let icon2 = 'image://'
let icon3 = 'image://'
let icon4 = 'image://'
let color = ['#1890ef', '#4bb1ff', '#ffd633', '#ff7b41']
let radius4 = ['20%', '40%']

let tooltipStyle = {
  trigger: 'item',
  formatter: '{b}: {c} ({d}%)',
  padding: [8, 12, 8, 12],
  textStyle: {
    color: '#666'
  },
  borderWidth: 1,
  borderColor: '#dedede',
  backgroundColor: '#fff',
  extraCssText: 'box-shadow: 4px 4px 8px 0px rgba(6, 15, 53, 0.1);'
}

function getCommonSeries(center) {
  let radius1 = ['15%', '16%']
  let radius2 = ['45%', '46%']
  let radius3 = ['40%', '45%']

  let commonSeries = [{
    type: 'pie',
    center: center,
    radius: radius1,
    itemStyle: {
      color: '#d2d2d2'
    },
    data: [{value: 1}],
    label: {
      show: false
    },
    silent: true,
    animation: false
  },
  {
    type: 'pie',
    center: center,
    radius: radius2,
    itemStyle: {
      color: '#d2d2d2'
    },
    data: [{value: 1}],
    label: {
      show: false
    },
    silent: true,
    animation: false
  },
  {
    type: 'pie',
    center: center,
    radius: radius3,
    itemStyle: {
      color: '#fff'
    },
    data: [{value: 1}],
    label: {
      show: false
    },
    silent: true,
    animation: false
  }]

  return commonSeries
}

function drawPieOne(id, datas = {}) {
  let myChart = window.echarts.init(document.getElementById(id))
  let legendData = [
    {name: '无风险', icon: icon1},
    {name: '低风险', icon: icon2},
    {name: '中风险', icon: icon3},
    {name: '高风险', icon: icon4}
  ].reverse()
  let centerOne = ['40%', '45%']
  let seriesData = datas.seriesData || []

  function getLabel(bgColor, txtColor) {
    let label = {
      formatter: ['{block|}', '{perValue|{d}}{per|%}', '{block3|}', '{block2|}', '{value|{b}}', '{value2|{c}}'].join('\n'),
      verticalAlign: 'center',
      show: true,
      rich: {
        block: {
          height: 18
        },
        block2: {
          height: 5
        },
        block3: {
          width: 60,
          height: 1,
          backgroundColor: bgColor
        },
        perValue: {
          height: 20,
          fontSize: 16,
          color: txtColor,
          padding: [5, 0, 0, 0]
        },
        per: {
          fontSize: 13,
          color: txtColor
        },
        value: {
          height: 14,
          fontSize: 12,
          color: txtColor
        },
        value2: {
          height: 14,
          fontSize: 12,
          color: txtColor,
          padding: [5, 0, 5, 0]
        }
      }
    }

    return label
  }

  let option = {
    tooltip: {
      ...tooltipStyle
    },
    color: ['#1890ef', '#4bb1ff', '#ffd633', '#ff7b41'].reverse(),
    legend: {
      orient: 'vertical',
      x: '76%',
      y: '25%',
      align: 'left',
      itemWidth: 18,
      itemHeight: 18,
      data: legendData,
      formatter: function(name) {
        return name === '高风险' ? '高风险：80-100' : name === '中风险' ? '中风险：60-80' : name === '低风险' ? '低风险：40-60' : '无风险：40以下'
      }
    },
    series: [
      ...getCommonSeries(centerOne),
      {
        name: '风险级别',
        type: 'pie',
        center: centerOne,
        radius: radius4,
        startAngle: 180,
        emphasis: {
          label: {
            ...getLabel('#ff8401', '#ff8401')
          }
        },
        label: {
          formatter: ['{block|}', '{block3|}', '{block2|}', '{value|{b}}'].join('\n'),
          verticalAlign: 'center',
          rich: {
            block: {
              height: 18
            },
            block2: {
              height: 5
            },
            block3: {
              width: 60,
              height: 1,
              backgroundColor: '#d2d6dd'
            },
            perValue: {
              height: 20,
              fontSize: 16,
              color: '#666666',
              padding: [5, 0, 0, 0]
            },
            per: {
              fontSize: 13,
              color: '#666666'
            },
            value: {
              height: 14,
              fontSize: 12,
              color: '#666666'
            },
            value2: {
              height: 14,
              fontSize: 12,
              color: '#666666',
              padding: [5, 0, 5, 0]
            }
          }
        },
        labelLine: {
          length: 30,
          length2: 10,
          show: true,
          lineStyle: {
            color: '#d2d6dd'
          },
          emphasis: {
            lineStyle: {
              color: '#ff8401'
            }
          }
        },
        data: seriesData
      }
    ]
  }

  myChart.clear()
  myChart.setOption(option)
}

function drawPieTwo(id, datas = {}) {
  let myChart = window.echarts.init(document.getElementById(id))
  let title = datas.title
  let center = ['50%', '50%']
  let seriesData = datas.seriesData || []

  function getRich(bgColor, txtColor) {
    let rich = {
      block: {
        width: 70,
        height: 1,
        backgroundColor: bgColor
      },
      perValue: {
        height: 16,
        fontSize: 16,
        color: txtColor,
        padding: [2, 0, 1, 0],
        align: 'center'
      },
      per: {
        fontSize: 13,
        color: txtColor,
        align: 'center'
      },
      value: {
        height: 17,
        fontSize: 12,
        color: txtColor,
        padding: [1, 0, 1, 0],
        align: 'center'
      }
    }
    return rich
  }

  function getLabel(bgColor, txtColor) {
    let label = {
      formatter: ['{perValue|{d}}{per|%}', '{block|}', '{value|{b}}'].join('\n'),
      verticalAlign: 'center',
      rich: {
        ...getRich(bgColor, txtColor)
      }
    }

    return label
  }

  let option = {
    color: color,
    title: {
      text: title,
      x: 'center',
      textStyle: {
        color: '#333',
        fontSize: 14,
        fontFamily: 'MicrosoftYaHei'
      }
    },
    tooltip: {
      ...tooltipStyle
    },
    series: [
      ...getCommonSeries(center),
      {
        type: 'pie',
        startAngle: 180,
        center: center,
        radius: radius4,
        emphasis: {
          label: {
            ...getLabel('#ff8401', '#ff8401')
          }
        },
        label: {
          ...getLabel('#d2d6dd', '#666666')
        },
        labelLine: {
          length: 30,
          length2: 12,
          show: true,
          lineStyle: {
            color: '#d2d6dd'
          },
          emphasis: {
            lineStyle: {
              color: '#ff8401'
            }
          }
        },
        data: seriesData
      }
    ]
  }

  myChart.clear()
  myChart.setOption(option)
}

export const PieCharts = {
  drawPieOne: drawPieOne,
  drawPieTwo: drawPieTwo
}



// WEBPACK FOOTER //
// ./src/assets/js/chart/pieChart.js